<template>
	<n-layout-header
		class="h-15 bg-gradient-header text-white border-b border-border-1 bg-clip-padding">
		<div class="px-12">
			<div class="max-w-[1390px] h-15 mx-auto relative flex justify-between items-center">
				<div class="flex items-center">
					<app-logo />
				</div>
				<div class="absolute left-[50%] -translate-x-[50%]">
					<app-wallet v-if="accountStore.isLogin" />
				</div>
				<div class="flex items-center gap-5">
					<template v-if="accountStore.isLogin">
						<!--<app-search />-->
						<app-sidebar-toggles />
						<app-account-info />
					</template>
					<template v-else>
						<app-download v-if="false" />
						<app-region-lang />
						<app-account-action />
					</template>
				</div>
			</div>
		</div>
	</n-layout-header>
</template>

<script lang="ts" setup>
import { NLayoutHeader } from 'naive-ui'
import AppLogo from '@/components/app/app-logo/index.vue'
import AppWallet from '@/components/app/app-wallet/index.vue'
// import AppSearch from '@/components/app/app-search/index.vue'
import AppAccountAction from '@/components/app/app-account-action/index.vue'
import AppAccountInfo from '@/components/app/app-account-info/index.vue'
import AppSidebarToggles from '@/components/app/app-sidebar-toggles/index.vue'
import AppDownload from '@/components/app/app-download/index.vue'
import AppRegionLang from '@/components/app/app-region-lang/index.vue'
import { useAccountStore } from '@/store'
import { onMounted } from 'vue'
const accountStore = useAccountStore()
// const handleFontSize = () => {
// 	if (inputVal.value.length > 1) {
// 		document.body.setAttribute('style', 'font-weight:' + inputVal.value)
// 	}
// }
// watch(
// 	() => [appStore.lang],
// 	() => {
// 		handleFont(fontFamily)
// 	},
// 	{ immediate: true }
// )
onMounted(() => {
	//handleFont(fontFamily[0].key)
})
</script>
<style>
.tmp-btn.active {
	background-color: var(--color-primary);
}
.tmp-input {
	border: 1px solid white;
	border-radius: 8px;
	padding: 5px 10px;
}
</style>
